<template>
  <view class="page-container">
    <!-- 搜索区域 -->
    <view class="search-bar">
      <view class="search-container">
        <uni-search-bar v-model="searchName" placeholder="输入用户手机号" radius="100" clearButton="auto"
          @confirm="handleSearch" />
        <view class="action-buttons">
          <view class="search-btn" @click="handleSearch">搜索</view>
          <uni-icons class="add-btn" type="plus" size="30" @click="handleAddUser" />
        </view>
      </view>
    </view>

    <view class="user-list">
      <uni-pagination :current="pagination.page" :pageSize="pagination.limit" :total="pagination.total"
        @change="handlePageChange" />
      <view class="user-card" v-for="(user, index) in users" :key="index">
        <view class="user-header">
          <text class="user-name">{{ user.name }}</text>
          <text class="user-role">{{ getUserRole(user.role) }}</text>
        </view>
        <view class="user-phone">{{ user.phone }}</view>
        <view class="line"></view>
        <view class="user-actions">
          <view class="action-links">
            <text class="action-link" @click.stop="handleEditUser(user.user_id)">修改</text>
            <text class="action-link" @click.stop="handleAddCardPackage(user.user_id)">卡包管理</text>
          </view>
          <view class="primary-action" @click.stop="handleAddOrder(user.user_id, user.name)">新增订单</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import store from '@/utils/store.js';

export default {
  props: {
    storeId: {
      type: String,
      required: false,
      default: '' // 可以设置默认值，但required为true时通常不需要
    }
  },
  data() {
    return {
      searchUser: '',
      users: [],
      pagination: {
        page: 1,
        limit: 10,
        total: 0
      }
    };
  },
  watch: {
    // 监听storeId变化，如果父组件传入的storeId变化，重新加载数据
    storeId(newVal) {
      if (newVal) {
        this.handleSearch();
      }
    }
  },
  methods: {
    handleEditUser(userId) {
      uni.navigateTo({
        url: `/pages/user/edit?user_id=${userId}&store_id=${this.storeId}`
      });
    },
    handleAddCardPackage(userId) {
      uni.navigateTo({
        url: `/pages/user/bind_card_package?store_id=${this.storeId}&user_id=${userId}`
      });
    },
    handlePageChange(e) {
      this.pagination.page = e.current;
      this.handleSearch();
    },
    async handleSearch() {
      try {
        const params = {
          page: this.pagination.page,
          limit: this.pagination.limit,
          name: this.searchUser || undefined
        };

        const res = await store.getStoreUsers(this.storeId, params);
        //console.log('-------res', res);
        this.users = res.list || [];
        this.pagination.total = res.total || 0;

      } catch (error) {
        uni.showToast({
          title: '获取用户列表失败',
          icon: 'none'
        });
      }
    },
    handleAddUser() {
      uni.navigateTo({
        url: `/pages/user/edit?store_id=${this.storeId}`
      });
    },
    handleAddOrder(userId, userName) {
      uni.navigateTo({
        url: `/pages/order/edit?store_id=${this.storeId}&user_id=${userId}&user_name=${encodeURIComponent(userName)}`
      });
    },
    handleUserClick(userId) {
      uni.navigateTo({
        url: `/pages/card_consumptions/index?store_id=${this.storeId}&user_id=${userId}`
      });
    },
    getUserRole(role) {
      const roleMap = {
        'admin': '管理员',
        'manager': '店长',
        'staff': '员工',
        'owner': '店主',
        'customer': '顾客'
      };
      return role ? roleMap[role] || '' : '';
    },
  },
  created() {
    // 组件创建时，如果已有storeId则加载数据
    if (this.storeId) {
      this.handleSearch();
    }
  }
};
</script>

<style lang="scss">
@import '@/uni.scss';

.user-list {
  margin-top: 30rpx;
}

.user-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  position: relative;
  margin-bottom: 30rpx;

  &:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -15rpx;
    left: 30rpx;
    right: 30rpx;
    height: 1rpx;

  }
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.user-name {
  font-size: 36rpx;
  color: $uni-main-color;
  font-weight: bold;
  margin-right: 20rpx;
}

.user-role {
  font-size: 28rpx;
  color: $uni-text-color-grey;
}

.user-phone {
  font-size: 28rpx;
  color: $uni-text-color-grey;
  margin-bottom: 20rpx;

}

/* 新增订单按钮样式 */
.add-order-btn {
  padding: 0 20rpx;
  height: 56rpx;
  line-height: 56rpx;
  background: #FF9500;
  color: #fff;
  border-radius: 28rpx;
  font-size: 26rpx;
  margin-right: 20rpx;
}

.user-actions {
  display: flex;
  align-items: center;
}

/* 调整用户项布局 */
.user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #eee;
}

/* 新增卡包按钮样式 */
.add-card-btn {
  padding: 0 20rpx;
  height: 56rpx;
  line-height: 56rpx;
  background: #f1f1f1 !important;
  color: #666 !important;
  border-radius: 28rpx;
  font-size: 26rpx;
  margin-right: 20rpx;
}

/* 调整原有新增订单按钮的右边距 */
.add-order-btn {
  margin-right: 0;
  /* 移除原有右边距 */
}
</style>